<script setup lang="ts">
import Echart from "@/components/ecahrts/index.vue";
import Table from "@/components/tables/index.vue";
import { ref } from "vue";
const container1 = ref("echart-container1");
const container2 = ref("echart-container2");
</script>

<template>
  <div class="echart-container">
    <el-card style="padding: 10px">
      <Echart :className="container1" />
    </el-card>
    <el-card style="padding: 10px">
      <Echart :className="container2" />
    </el-card>
    <el-card style="padding: 10px">
      <Table></Table>
    </el-card>
  </div>
</template>

<style scoped>
.echart-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.echart-container > div {
  margin: 30px;
}
</style>
